<template>
    <section class="section_word">
        <div class="word_w">
            <div class="word_top">
                <p class="word_p">用户留言</p>
                <div class="showMess">
                    <ul style="width:100%;height:100%">
                        <!-- <li v-for="item in allUserMessage" :key="item.id">{{item.Nickname}}:{{item.Content}}</li> -->
                        <li v-for="item in allUserMessage" :key="item.id" class="showMess-li" style="width:100%;height:30%">
                            <div class="usermess" style="width:100%;height:100%">
                                <div>
                                    <p style="height:20px">{{item.Nickname}}</p><span class="time">{{item.nowTime}}</span>
                                    <p>{{item.Content}}</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <WangEditor ref="myEditor" @sendEditor="sendEditor"/>
            <el-button type="primary" round style="position: absolute;bottom: 0;right:600px;z-index:110" @click="addUserMess()">发布</el-button>
        </div>
    </section>
</template>

<script>
import axios from 'axios'
export default { 
    name:'Word',
    data() {
        return {
            word:'',
            nowTime:'',
            allUserMessage:[],
            allUser:[],
            timer:null
        }
    },
    created() {
        this.nowTime = new Date()
        this.getAllMessage()
        this.getAlluserlist()
    },
    mounted() {
        this.$store.dispatch("getuserlist"); 
        this.sortTime()
        this.nowTime = this.formatDateTime(this.nowTime) + ' ' +String(this.nowTime).slice(16,24)
        console.log("当前时间",this.nowTime)

    },
    beforeDestroy() {
        clearTimeout(this.timer)
    },
    methods: {
        //根据时间排序--待修改
        sortTime(){
            this.timer = setTimeout(()=>{
                this.allUserMessage.sort(function (x,y) {//大-小，降序排列，对于最新时间是升序
                    // return  new Date(Date.parse(x.nowTime)).getTime() - new Date(Date.parse(y.nowTime)).getTime();  
                    //获取时间，然后将该事件转换成时间数字->1970.1.1         
		                return  new Date(Date.parse(y.nowTime)).getTime() - new Date(Date.parse(x.nowTime)).getTime();
                    // return y.userId-x.userId
                });
                console.log("sort11",this.allUserMessage)
            },100)
        },
        // 获取所有用户
        getAlluserlist(){
            axios.get("http://localhost:8080/api/getAllUser/getAllUserlist",{
              params:{
                id:1
              }
            }).then(
              res=>{
                // this.tableData = res.data
                // console.log("999",res)
                // console.log(this.tableData)
                for(var i= 0;i<res.data.length;i++){
                    var tem = Number(String(res.data[i].userCreatetime).slice(11,13))+8
                    var d = tem%24 > 10? tem%24 :'0'+tem%24
                    res.data[i].userCreatetime = String(res.data[i].userCreatetime).slice(0,10)+ ' ' +d + String(res.data[i].userCreatetime).slice(13,19)
                    // state.usersubgoods.push(value [i])
                    this.allUser = res.data
                }
                console.log("所有用户信息为：",this.allUser)
              },
              error=>{
                console.log("88",error.message)
              }
            )
        },
        //获取所有用户评论
        getAllMessage(){
            axios.get("http://localhost:8080/api/getAllOrder/getAllMessage",{
              params:{
                id:1
              }
            }).then(
              res=>{
                for(var i= 0;i<res.data.length;i++){
                    var tem = Number(String(res.data[i].nowTime).slice(11,13))+8
                    var d = tem%24 > 10? tem%24 :'0'+tem%24
                    res.data[i].nowTime = String(res.data[i].nowTime).slice(0,10)+ ' ' +d + String(res.data[i].nowTime).slice(13,19)
                    // state.usersubgoods.push(value [i])
                    this.allUserMessage = res.data
                }
                console.log("所有用户评论为",this.allUserMessage)
                console.log("999",res)
              },
              error=>{
                console.log("88",error.message)
              }
            )
        },
        clearForm(){
            this.$refs.myEditor.editor.txt.clear()
        },
        // 时间转换
        formatDateTime (date) {
          var date = new Date(date)
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          m = m < 10 ? ('0' + m) : m;
          var d = date.getDate();
          d = d < 10 ? ('0' + d) : d;
          // return y + '-' + m + '-' + d+' '+h+':'+minute;
          return y + '-' + m + '-' + d
        },
        sendEditor(val){
          this.word = val
        //   console.log(this.word)
          // console.log("222",this.goodsForm.goodsContent)
        },
        // 添加用户评论
        addUserMess(){
            if(this.word!=''){
                // console.log(this.word)
                axios.get("http://localhost:8080/api/addUserMessage/addUserMessagelist",{
                  params:{
                    userId:this.$store.state.user.userlist.userId,
                    Nickname:this.$store.state.user.userlist.Nickname,
                    state: 1,
                    nowTime:this.nowTime,
                    Content:this.word
                  }
                }).then(
                  res=>{
                    this.$message({
                      message:'评价成功',
                      type:'success'
                    })
                    this.clearForm()
                    this.$router.go(0)
                    // console.log("添加成功")
                  },
                  error=>{
                    console.log("b",error.message)
                  }
                )
            }else{
                alert("请认真输入你的评价信息，它将是对我最大的鼓励")
            }
        }
    },
}
</script>

<style>
.word_w{
    width: 1350px;
    height: 100%;
    margin: 0 auto;
    
}
.section_word{
    width: 100%;
    height: 800px;
    margin-top: 50px;
    position: relative;
}
.word_top{
    width: 100%;
    height: 60%;
    background-color: #fff;
    padding: 30px;
}
.word_p{
    width: 100%;
    height: 20%;
    border-bottom: 4px solid skyblue;
    padding-left: 30px;
    font-size: 30px;
    line-height: 84px;
    font-family: "楷体";
    font-weight: bold;
}
.showMess{
    width: 100%;
    height: 80%;
    overflow: scroll;
    overflow-x: hidden;
    padding: 10px;
}
.showMess-li{
    border-bottom: 1px dotted #929292;
}
.showMess-li:last-child{
    border-bottom: none;
}
.time{
    height: 20px;
    line-height: 20px;
    margin-left: 20xp;
    font-size: 10px;
    color: rgb(156, 156, 156);
}
.word_bottom{
    width: 100%;
    height: 30%;
    background-color: #fff;
}
</style>